<template>
  <div class="app-container magic" :data-logined="Root.logined">
    <div class="title">
      <div class="title__text">{{ Root.getValue("title") }}</div>
      <div class="title__description">{{ Root.getValue("description") }}</div>
    </div>
    <div class="icon">
      <v-icon size="300px" color="white" :icon="mdiAccountCircleOutline" />
    </div>
    <div class="login">
      <input
        ref="inputRef"
        :class="{ logined: Root.logined}"
        @input="Root.input"
        :type="data[Root.step].textType"
        @keydown.enter="Root.next"
        title=""
        v-model="Root.text"
        :placeholder="Root.getValue('placeholder')"
        required
        autocapitalize="off"
      />
      <div class="input__close" v-if="!Root.logined">
        <v-icon :icon="mdiClose" @click="Root.clear" />
      </div>
      <div class="arrow__loginButton" v-if="Root.logined">
        <v-icon :icon="mdiArrowRightBox" color="white" :size="70" @click="Root.next"/>
      </div>
    </div>
    <div class="btn__wrapper magic">
      <v-btn :text="Root.getValue('buttonText')" color="blue" width="250px" style="font-size: 20px" height="50px" @click="Root.next" v-if="!Root.logined"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import { mdiAccountCircleOutline, mdiArrowRightBox, mdiClose } from "@mdi/js";
import { useToken } from "@/components/windows/hooks/use-token";
import { isEmpty } from "lodash-unified";
import system from "@/api/windows/systemApi.ts";

const router = useRouter();
const inputRef = ref<HTMLInputElement | null>(null);
/**
 * 不同状态使用的数据
 */
const data: Record<
  "input-username" | "input-password" | "logined-password",
  {
    title: string;
    description: string;
    placeholder: string;
    emptyTip: string;
    textType: string;
    buttonText: string;
  }
> = {
  "input-username": {
    title: "谁将会使用这个网站？",
    description: "你想使用什么账户名？",
    placeholder: "名称",
    emptyTip: "用户名不能为空!",
    textType: "text",
    buttonText: "下一步",
  },
  "input-password": {
    title: "创建容易记住的密码",
    description: "请确保选择你一定会记住的内容。",
    placeholder: "密码",
    emptyTip: "密码不能为空!",
    textType: "password",
    buttonText: "登录",
  },
  "logined-password": {
    title: "请输入密码",
    description: "",
    placeholder: "密码",
    emptyTip: "密码不能为空!",
    textType: "password",
    buttonText: "登录"
  }
};
const Root = (() => {

  /**
   * 触发错误提示
   */
  const trigger = (msg: string) => {
    inputRef.value?.setCustomValidity(msg);
    inputRef.value?.reportValidity(); // 触发浏览器原生气泡提示
  };
  /**
   * 获取按钮文本
   * @param property
   */
  const getValue = (property: keyof (typeof data)["input-username"]) => data[s.step][property];
  /**
   * 按钮点击事件
   */
  const next = () => {
    if (!s.text.trim()) {
      trigger(data[s.step].emptyTip);
      return;
    }
    if (s.step === "input-username") {
      s.step = "input-password";
      s.model.username = s.text;
      s.text = "";
      return;
    } else {
      s.model.password = s.text;
    }
    system
      .login({
        username: s.model.username,
        password: s.model.password,
      })
      .then((res) => {
        const data = res.data;
        useToken().setToken(data.token, data.ttl);
        useToken().setUserInfo({ username: s.model.username, nickname: "" });
        router.push("/windows");
      })
      .catch(trigger);
  };
  /**
   * 初始化
   */
  const init = () => {
    const userInfo = useToken().getUserInfo();
    if (!isEmpty(userInfo)) {
      s.model.username = userInfo.username;
      s.step = "logined-password";
      s.logined = true;
    }
  };
  /**
   * 输入事件
   * @param e
   */
  const input = (e) => {
    if (e.target.value) {
      inputRef.value?.setCustomValidity("");
    }
    s.text = e.target.value.trim();
  };
  /**
   * 清除文本框
   * @param e
   */
  const clear = (e) => {
    s.text = "";
    inputRef.value?.focus();
  };
  const fn = { next, input, getValue, clear };
  const s = reactive({
    step: "input-username" as "input-username" | "input-password" | "logined-password",
    model: { username: useLocalStorage("username", ""), password: useLocalStorage("password", "" ) },
    text: "",
    logined: useLocalStorage("logined", false),
    ...fn,
  });
  init();
  return s;
})();
</script>
<style scoped lang="scss">
.app-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #004174;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5vh;
}
.app-container[data-logined=true] {
  background: url("@/assets/images/login/kami.jpg") no-repeat center fixed ;
  background-size: cover;
}
.title {
  text-align: center;
  color: white;
  width: 100%;

  &__text {
    font-size: 80px;
  }

  &__description {
    font-size: 20px;
  }
}

.icon {
  width: 100%;
  display: flex;
  justify-content: center;
}

.login {
  position: relative;
  width: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  .input__close {
    margin-left: -40px;
    opacity: 0;
  }

  input {
    background: #002845FF;
    width: 900px;
    height: 70px;
    padding: 0 70px 0 20px; // 注意：右边内边距留出来，给箭头图标腾地方
    border: 1px solid white;
    color: white;
    font-size: 20px;
    &:focus {
      background: white;
      color: black;
      outline: none;
    }

  }
  .logined {
    background: rgba(255,255,255, 0.8);
    &:focus {
      background: rgba(255,255,255, 0.8);
      box-shadow: 0 0 10px 0 pink;
    }
  }

  input:focus + .input__close {
    opacity: 1;
  }

  .arrow__loginButton {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    cursor: pointer;
    transition: transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      transform: translateY(-50%) scale(1.08);
    }
  }
}

.btn__wrapper {
  position: fixed;
  display: flex;
  bottom: 0;
  right: 0;
  padding: 27px;
}

</style>
